iT邦幫忙

0

為了轉生而點技能-JavaScript,day14(this下篇: Call、apply呼叫及bind

  • 分享至 

  • xImage
  •  

Call呼叫:呼叫函式的方法,並且能指定 this 值。

用法:函式名.call(指定的this變數(參數))。

        var myName = '真心鎮大冒險';

        var family = {
            myName: '小明家',
        }

        function fn(para1, para2) {
            console.log(this, typeof this, para1, para2);
        }
        fn(1, 2);
        fn.call(family, 1, 2);

https://ithelp.ithome.com.tw/upload/images/20211205/20143762bZBO8brLKd.jpg

解:

  1. fn(1, 2):此時的this,屬於一般呼叫(簡易呼叫),所以變數會選擇全域的變數。
  2. fn.call(family, 1, 2):可以指定this呼叫的變數。這邊選擇family。
let obj = {};

function foo() {
  console.log(this);
}

foo();          // "Window{}"
foo.call(obj);  // Object{}

apply呼叫:呼叫函式的方法,並且能指定 this 值。

用法:函式名.apply(指定的this變數[參數])。

        var myName = '真心鎮大冒險';

        var family = {
            myName: '小明家',
        }
        function fn(para1, para2) {
            console.log(this, typeof this, para1, para2);
        }
        fn(1, 2);
        fn.apply(family, [3, 4]);

https://ithelp.ithome.com.tw/upload/images/20211205/20143762FfCszNWJnF.jpg

let obj = {};

function foo() {
  console.log(this);
}
foo();          // "Window{}"
foo.apply(obj); // Object{}
let obj = {};

function foo(a, b) {
  console.log(this, a, b);
}

foo.call(obj, 1, 2);    // Object{} 1 2
foo.apply(obj, [1, 2]); // Object{} 1 2

此模式被稱為硬綁定(hard binding) 指的是綁定既明確又不會意外變回預設的綁定。


利用函式bind(),當被呼叫的時候,指定this值。

        var myName = '真心鎮大冒險';

        var family = {
            myName: '小明家',
        }
        function fn(para1, para2) {
            console.log(this, typeof this, para1, para2);
        }
        fn(1, 2);
        var fn2 = fn.bind(family, '小明');
        fn2(1);

注意:此時的fn2(1)看起來會很像是簡易呼叫!!但是本質不是

https://ithelp.ithome.com.tw/upload/images/20211205/20143762QCHA96kjGP.jpg



參考文章:
JavaScript 的 this:https://chupainotebook.blogspot.com/2019/09/javascript-this.html


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言